<template>
  <div style="height:400px">
    <IEcharts :option="jqTimelist" />
  </div>
</template>

<script>
  import IEcharts from 'vue-echarts-v3/src/full.js'
  export default {
    components: {
      IEcharts
    },
    data () {
      return {
        jqTimelist: {
          title: {
            text: '各处室工单处理量统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          legend: {
            data: ['处理量', '处理时效'],
            right: '3%'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '处理量：件',
              min: 0,
              // max: 1500,
              // interval: 300,
              axisLabel: {
                formatter: '{value}'
              }
            },
            {
              type: 'value',
              name: '处理时效：天',
              min: 0,
              max: 10,
              interval: 2,
              axisLabel: {
                formatter: '{value} '
              }
            }
          ],
          series: [
            {
              name: '处理量',
              type: 'bar',
              data: [],
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                verticalAlign: 'middle',
                textStyle: { // 数值样式
                  color: '#409EFF',
                  fontSize: 12
                }
              },
              barWidth: 40,
              itemStyle: {
                normal: {
                  color: '#409EFF'
                }
              }

            },
            {
              name: '处理时效',
              type: 'line',
              yAxisIndex: 1,
              data: [],
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                verticalAlign: 'middle',
                textStyle: { // 数值样式
                  color: '#69DD81',
                  fontSize: 12
                }
              },
              itemStyle: {
                normal: {
                  color: '#69DD81'
                }
              }
            }
          ]
        }

      }
    },
    created () {
      this.getjqsjList()
    },
    methods: {
      getjqsjList () {
        this.$axios.post(this.$api.homeCharts.deptWorkAndEfficiencyCharts).then(res => {
          if (res) {
            console.log(res)
            this.jqTimelist.xAxis[0].data = res.name.split(',')
            this.jqTimelist.series[0].data = res.numbers.split(',')
            this.jqTimelist.series[1].data = res.effcicy.split(',')
          }
        })
      }
    }
  }
</script>

<style>
</style>
